<template>
  <div class="Menu">
    <!-- 顶部精品歌单图片大屏 -->
    <div class="TopImg" v-if="imgInfo">
      <div class="image">
        <img v-lazy="imgInfo.coverImgUrl" alt="" />
        <img v-lazy="imgInfo.coverImgUrl" alt="" />
      </div>
      <div class="name">
        <p class="tag"><i class="el-icon-view"></i> 精品歌单</p>
        <p class="word">{{ imgInfo.name }}</p>
      </div>
    </div>
    <!-- 歌单模块 -->
    <Tab :category="tags" :currentItem="category" @tabClick="tabClick"></Tab>
    <div class="loading" v-show="show"><i class="el-icon-loading"></i>加载中...</div>
    <MenuList :list="playlists" @itemClick="itemClick"></MenuList>
  </div>
</template>

<script>
import Tab from '@/components/tabs/Tab';
import MenuList from '@/components/list/MenuList';
export default {
  data() {
    return {
      category: '华语',
      tags: [],
      playlists: '',
      imgInfo: '',
      show: false,
    };
  },
  computed: {},
  created() {
    this.getCategoryList();
    this.geMenutList();
    this.getSpecialMenu();
  },
  components: { Tab, MenuList },
  methods: {
    //获取歌单分类
    async getCategoryList() {
      const { tags } = await this.$request('/playlist/hot');
      this.tags = tags;
    },
    //获取分类下的歌单
    async geMenutList() {
      const { playlists } = await this.$request('/top/playlist', { cat: this.category });
      this.playlists = playlists;
    },
    //获取精品歌单第一首封面展示
    async getSpecialMenu() {
      const { playlists } = await this.$request('/top/playlist/highquality', { cat: this.category });
      this.imgInfo = playlists[0];
    },
    //点击分类回调
    tabClick(id, name) {
      this.playlists = [];
      this.show = true;
      this.category = name;
      this.getSpecialMenu();
      setTimeout(() => {
        this.geMenutList();
        this.show = false;
      }, 300);
    },
    //点击歌单回调
    itemClick(id) {
      this.$router.push('/songsmenudetail/' + id).catch((err) => {});
    },
  },
};
</script>

<style scoped lang='scss'>
.Menu {
  .TopImg {
    position: relative;
    .image {
      width: 100%;
      height: 180px;
      overflow: hidden;
      border-radius: 10px;
      position: relative;

      :first-child {
        width: 100%;
        height: 180px;
        filter: blur(30px);
      }
      :last-child {
        position: absolute;
        left: 15px;
        top: 15px;
        @include image(150px, 10px);
      }
    }
    .name {
      position: absolute;
      top: 20%;
      left: 25%;
      color: #fff;
      .tag {
        color: antiquewhite;
      }
    }
  }
  .loading {
    text-align: center;
    font-size: 13px;
  }
}
</style>